<template>
  <div class="x-edit-box"
  :class="[disabled ? 'is_disabled' : 'is_valid']">
    <flexbox class="g-header"
      :class="[disabled ? 'is_disabled' : 'is_valid']">
      <el-button
        type="text"
        class="g-name"
        icon="el-icon-plus"
        @click="showWindow = true">填写内容</el-button>
    </flexbox>
    <div class="g-cover" v-show="showWindow" ref="gWin" :style="{zIndex: zIndex}">
      <flexbox class="g-win" direction="column" align="stretch">
        <div class="win-ttl">{{item.data.name}}</div>
        <CreateFields
          class="win-body"
          ref="crmForm"
          :crmType="crmType"
          :action="action"
          :sourceModel="childSourceModel"
        />
        <div class="g-btns">
          <el-button type="primary" size="mini" @click="handleValidate(true)">完成</el-button>
          <el-button type="infor" size="mini" @click="handleValidate(false)">关闭</el-button>
        </div>
      </flexbox>
    </div>
  </div>
</template>

<script>
import objMixin from './objMixin'
import { crmFileSave, crmFileDelete } from '@/api/common'
import { fileSize } from '@/utils/index'
import { getMaxIndex } from '@/utils'
var uploadImgServer = '/api/file/wangUpload'
export default {
  components: {
    CreateFields: () => import('@/components/CreateFields')
  },
  mixins:[objMixin],
  props: {
    action: {
      type: Object,
      default: () => {
        return {
          type: 'save',
          id: '',
          data: {} //编辑所需信息
        }
      }
    },
    // CRM类型
    crmType: {
      type: String,
      default: ''
    },
  },
  methods: {
    handleValidate (complier) {
      if (complier) {
        let valid = this.validate()
        if (valid) {
          this.showWindow = false
          this.$emit('value-change', {
            item: this.item,
            index: this.index,
            value: this.$refs.crmForm.getItemsValue()
          })
        }
      } else {
        this.showWindow = false
        this.resetModel()
      }
    },
    // 重置表单
    resetModel () {
      var temp = this.item.childrens.map(child => {
        let {value, ...rest} = child
        return {
          ...rest,
          value: this.value[child.fieldName]
        }
      })
      this.childSourceModel = JSON.parse(JSON.stringify(temp))
    },
    validate () {
      let res
      this.$refs.crmForm.validate(valid => {
        res = valid
      })
      return res
    }
  },
  data () {
    return {
      childSourceModel: [],
      showWindow: false,
      zIndex: getMaxIndex()
    }
  },
  mounted () {
    document.body.appendChild(this.$refs.gWin)
    this.resetModel() // 初始化表单
  },
  beforeDestroy () {
    document.body.removeChild(this.$refs.gWin)
  }
}
</script>

<style lang="scss" scoped>
.x-edit-box {
  display: inline-block;
  position: relative;
  border-radius: 3px;
  width: 100%;
  border: 1px solid #ddd;
  padding: 3.5px 5px;
  line-height: 15px;
}
.xh-files-cont.is_disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  cursor: not-allowed;
  .g-name {
    background-color: #f0f4f8ea;
    color: #c0c4cc;
    cursor: not-allowed;
  }
}
.xh-files-cont.is_valid:hover {
  border-color: #c0c4cc;
}
.g-header {
  padding: 5px 0;
  .g-logo {
    position: block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
  }
  .g-name {
    color: #3e84e9;
    font-size: 12px;
    margin-right: 10px;
    cursor: pointer;
    padding: 0;
  }
}
.g-header.is_disabled {
  cursor: not-allowed;
}

.g-cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(10, 10, 10, 0.58);
  z-index: 2000;

  .g-win {
    position: absolute;
    width: auto;
    width: 680px;
    top: 20%;
    left: 50%;
    padding: 8px;
    max-height: 68%;
    transform: translate3d(-50%, 0, 0);
    background-color: #FFF;
    .win-ttl {
      flex: 0;
      font-size: 12px;
      padding: 5px 0;
      margin: 0 10px 5px;
      text-align: center;
      border-bottom: 1px solid #cfcfcf;
    }
    .win-body {
      flex: 1;
      overflow-y: auto;
    }
    .g-btns {
      flex: 0;
      padding: 5px;
      text-align: right;
    }
  }
}

</style>
